<a routerLink="/user/edit" class="oc-add-btn" [mdl-tooltip]="'添加用户'" mdl-button mdl-button-type="fab" mdl-colored="accent"
  mdl-ripple>
  <mdl-icon>add</mdl-icon>
</a>
<div class="data-table-container">
  <div class="search-box mdl-shadow--2dp">
    <div class="mdl-grid">
      <mdl-textfield class="search-input mdl-cell mdl-cell--3-col" type="text" label="姓名" [(ngModel)]="searchRequest.userName"
        placeholder="填写搜索姓名" autofocus></mdl-textfield>
      <mdl-textfield class="search-input mdl-cell mdl-cell--3-col" type="text" label="手机号" [(ngModel)]="searchRequest.telephone"
        placeholder="填写搜索手机号" autofocus></mdl-textfield>
      <mdl-select *ngIf="!isHr" class="mdl-cell mdl-cell--3-col" label="选择公司" floating-label [(ngModel)]="selectCompany">
        <mdl-option *ngFor="let c of companies" [value]="c.id">{{c.name}}</mdl-option>
      </mdl-select>
      <div class="grid-btn mdl-cell mdl-cell--3-col">
        <button mdl-button mdl-button-type="icon" mdl-colored="primary" (click)="search()">
          <mdl-icon>search</mdl-icon>
        </button>
        <button [ngStyle]="{'color': '#AAA'}" mdl-button mdl-button-type="icon">
          <mdl-icon>cloud_upload</mdl-icon>
        </button>
        <button *ngIf="!showCards" [ngStyle]="{'color': '#AAA'}" mdl-button mdl-button-type="icon" (click)="showCards=!showCards">
          <mdl-icon>view_module</mdl-icon>
        </button>
        <button *ngIf="showCards" [ngStyle]="{'color': '#AAA'}" mdl-button mdl-button-type="icon" (click)="showCards=!showCards">
          <mdl-icon>list</mdl-icon>
        </button>
      </div>
    </div>
  </div>
  <ngx-datatable *ngIf="!showCards" [rows]="rows" [columns]="columns" [headerHeight]="40" [rowHeight]="40" [columnMode]="'force'"
    [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [externalPaging]="true" [messages]="pagerMessage" [count]="count"
    [offset]="offset" [loadingIndicator]="isPageLoading" [limit]="limit" (page)='onPage($event)' class="material fullscreen">
    <ngx-datatable-column name="id">
      <ng-template let-column="column" ngx-datatable-header-template>
        Id
      </ng-template>
      <ng-template let-value="value" ngx-datatable-cell-template>
        {{ value }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="userName">
      <ng-template let-column="column" ngx-datatable-header-template>
        姓名
      </ng-template>
      <ng-template let-value="value" ngx-datatable-cell-template>
        {{ value }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="gender">
      <ng-template let-column="column" ngx-datatable-header-template>
        性别
      </ng-template>
      <ng-template let-value="value" ngx-datatable-cell-template>
        {{ value === 1 ? '男' : '女' }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="mobile">
      <ng-template let-column="column" ngx-datatable-header-template>
        手机号
      </ng-template>
      <ng-template let-value="value" ngx-datatable-cell-template>
        <!-- {{ value.buildingNumber }} -->
        {{ value }}
      </ng-template>
    </ngx-datatable-column>
    <!-- <ngx-datatable-column name="identy_photos"> -->
    <ngx-datatable-column name="photos">
      <ng-template let-column="column" ngx-datatable-header-template>
        是否有照片
      </ng-template>
      <ng-template let-value="value" ngx-datatable-cell-template>
        <button [ngStyle]="{'color': '#7fa282'}" (click)="showDialog(value[0].path)" *ngIf="value && value.length > 0" mdl-button
          mdl-button-type="icon">
          <mdl-icon>photo_size_select_actual</mdl-icon>
        </button>
        <i *ngIf="!value || value.length === 0">N/A</i>
      </ng-template>
    </ngx-datatable-column>
    <!-- <ngx-datatable-column name="email">
          <ng-template let-column="column" ngx-datatable-header-template>
            Email
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            {{ value }}
          </ng-template>
        </ngx-datatable-column> -->
    <ngx-datatable-column name="id">
      <ng-template let-column="column" ngx-datatable-header-template>
        操作
      </ng-template>
      <ng-template let-value="value" ngx-datatable-cell-template>
        <a routerLink="/user/edit/{{ value }}" class="table-action-btn">
          <i class="material-icons">edit</i>
        </a>
        <a (click)="delete(value)" class="table-action-btn app-delete-btn">
          <i class="material-icons">delete</i>
        </a>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

  <div *ngIf="showCards" class="card-container mdl-shadow--2dp">
    <mdl-card class="user-card" mdl-shadow="2" *ngFor="let r of cards; let i = index;">
      <mdl-card-title class="bg-title" *ngIf="r.photos && r.photos.length > 0" [ngStyle]="{'background': 'url(' + domain + '/' + r.photos[0].path + ')  center/cover'}">
        <h2 mdl-card-title-text>{{r.userName}}</h2>
      </mdl-card-title>
      <mdl-card-title class="bg-title" *ngIf="!r.photos || r.photos.length === 0" [ngStyle]="{'background': 'url()'}">
        <h2 mdl-card-title-text>{{r.userName}}</h2>
      </mdl-card-title>
      <mdl-card-supporting-text class="info-wrap">
        <p>Email: {{r.email}}</p>
        <p>电话: {{r.mobile}}</p>
      </mdl-card-supporting-text>
      <!-- <mdl-card-actions mdl-card-border>
        <button mdl-button mdl-colored mdl-ripple>查看详情</button>
      </mdl-card-actions> -->
      <mdl-card-menu class="icon-btn-top-right">
        <button mdl-button mdl-button-type="icon" mdl-ripple #btn1="mdlButton" (click)="m1.toggle($event, btn1)">
          <mdl-icon>more_vert</mdl-icon>
        </button>
      </mdl-card-menu>
      <mdl-menu #m1="mdlMenu" mdl-menu-position="bottom-right">
        <mdl-menu-item mdl-ripple [ngStyle]="{'color': '#d4462b'}" (click)="delete(r.id)">删除</mdl-menu-item>
        <mdl-menu-item mdl-ripple routerLink="/user/edit/{{ r.id }}">查看详情</mdl-menu-item>
      </mdl-menu>
    </mdl-card>
  </div>
  <ngx-datatable *ngIf="showCards" [rows]="rows" [headerHeight]="0" [rowHeight]="0" [columnMode]="'force'" [headerHeight]="0"
    [footerHeight]="50" [rowHeight]="0" [externalPaging]="true" [messages]="pagerMessage" [count]="count" [offset]="offset"
    [loadingIndicator]="isPageLoading" [limit]="limit" (page)='onPage($event)' class="material fullscreen">
  </ngx-datatable>
</div>